<template>
  <div class="block">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/management/bookmark' }">
        书签列表
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" id="add-button" @click="toBookmarkDetail">
      添加
    </el-button>
    <div class="search-container">
      <el-select v-model="type" slot="prepend" placeholder="请选择">
        <el-option value="" label="全部"> </el-option>
        <el-option
          v-for="item in types"
          v-bind:lable="item.name"
          v-bind:key="item.id"
          v-bind:value="item.name"
        >
        </el-option>
      </el-select>
      <el-input
        class="search-name"
        v-model="name"
        placeholder="请输入内容"
      ></el-input>
      <el-button icon="el-icon-search" @click="getBookMark" circle></el-button>
    </div>
    <el-table :data="items" style="width: 100%">
      <el-table-column prop="name" label="名称" min-width="12%">
      </el-table-column>
      <el-table-column prop="icon" label="图标" min-width="12%">
        <template width="90" slot-scope="scope">
          <img
            class="bookmark-icon"
            style="width: 3vw; height: 3vw; border: none; object-fit: cover"
            :src="scope.row.icon"
          />
        </template>
      </el-table-column>
      <el-table-column prop="url" label="链接" min-width="12%">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank" class="buttonText">{{
            scope.row.url
          }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" min-width="12%">
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="12%">
        <template slot-scope="scope">
          <el-button @click="showBookMark(scope.row)" type="text" size="small">
            查看
          </el-button>
          <el-button @click="editBookMark(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button
            @click="deleteBookmark(scope.row.id)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      :total="count"
      layout="total,prev, pager, next"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getBookMarkType, deleteBookMark, getBookMarkByType } from '@/api/bookmark';

export default {
  name: 'bookmark',
  data () {
    return {
      items: [
      ],
      types: [],
      visible: false,
      currentPage: 1,
      pagesize: 5,
      count: 0,
      name: "",
      type: "",
    }

  },
  methods: {
    toBookmarkDetail () {
      this.$router.push("/management/bookmarkDetail")
    },
    deleteBookmark (id) {
      deleteBookMark(id).then((value) => {
        this.getBookMark();
      }, function (error) {
        console.log(error);
      });
    },
    getBookMark () {
      getBookMarkByType(this.type, this.name, this.pagesize, this.currentPage).then((value) => {
        this.items = value.data;
        this.count = value.total;
      }, function (error) {
        if (error.response.status == 401) {
          this.$router.push({ path: `/login` });
        }
        console.log(error);
      });
    },
    showBookMark (item) {
      this.$router.push({ path: `/management/bookmarkDetail/${item.id}/show` });
    },
    editBookMark (item) {
      this.$router.push({ path: `/management/bookmarkDetail/${item.id}/edit` });
    },
    handleSizeChange: function (val) {
      this.pagesize = val;
      this.getBookMark();
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.getBookMark();
    },
    getBookMarkType () {
      getBookMarkType().then((value) => {
        this.types = value.data
      }, function (error) {
        console.log(error);
      });
    },
  },
  mounted () {
    this.getBookMark();
    this.getBookMarkType();
  }

}
</script>


<style scoped>
.bookmark-title {
  line-height: 2rem;
}

#add-button {
  margin-bottom: 20px;
  float: right;
  margin-right: 50px;
}
.bookmark-icon {
  border-radius: 5px;
}
.block {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
}
.search-name {
  width: 200px;
}
.search-container {
  float: left;
  margin-top: 25px;
  margin-bottom: 25px;
}
.pagination {
  margin-top: 20px;
}
.buttonText {
  cursor: pointer;
}
</style>
